<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=2Ovdtyu5BREqPl29Hz9LEOOQppO5GdKr"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <title>我的第一个地图</title>
    <style type="text/css">
        #container {
            height: 600px;
            width: 800px;
        }
        .tip {
            position: absolute;
            top: 45px;
            z-index: 99999;
            background-color: rgba(0, 0, 0, .1);
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <div class="address"></div>
    <input type="text" id="inp">
    <div class="tip"></div>
    <script>
        var map = new BMap.Map("container"); // 创建地图实例
        var point = new BMap.Point(116.404, 39.915); // 创建点坐标
        map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别

        map.enableScrollWheelZoom(true); // 启用滚轮缩放

        var scaleCtrl = new BMap.ScaleControl(); // 添加比例尺控件
        map.addControl(scaleCtrl);

        var zoomCtrl = new BMap.ZoomControl(); // 添加缩放控件
        map.addControl(zoomCtrl);

        var cityCtrl = new BMap.CityListControl(); // 添加城市列表控件
        map.addControl(cityCtrl);

        var opts = {
            width: 250, // 信息窗口宽度
            height: 100, // 信息窗口高度
            title: "标题" // 信息窗口标题
        };
        var content = `<h1>hello</h1><p style="color:blue">你好</p>`;
        var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象

        var marker = new BMap.Marker(point); // 创建标注
        map.addOverlay(marker); // 将标注添加到地图中

        // 单击打开信息窗口
        marker.addEventListener("click", function(e) {
            map.openInfoWindow(infoWindow, point); // 打开信息窗口
        });

        // 获取当前位置并显示
        $(function () {
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function (r) {
                if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                    var mk = new BMap.Marker(r.point);
                    map.addOverlay(mk);
                    map.panTo(r.point);
                    $(".address").html("您的位置：" + r.point.lng + "," + r.point.lat);
                }
                else {
                    $(".address").html("定位失败：" + this.getStatus());
                }
            }, { enableHighAccuracy: true });
        });

        // 搜索提示和定位
        $(function () {
            $("#inp").on("input", function () {
                $.ajax({
                    url: `https://api.map.baidu.com/place/v2/suggestion?query=${$("#inp").val()}&region=北京&city_limit=true&output=json&ak=2Ovdtyu5BREqPl29Hz9LEOOQppO5GdKr`,
                    dataType: "jsonp",
                    success: function (res) {
                        var str = "";
                        res.result.forEach(item => {
                            str += `<p class="item">${item.name}</p>`;
                        });
                        $(".tip").html(str);
                    }
                });
            });

            $(".tip").on("click", ".item", function () {
                var keyword = $(this).text();
                var local = new BMap.LocalSearch(map, {
                    renderOptions: {
                        map: map
                    }
                });
                local.search(keyword);
                $(".tip").html("");
                $("#inp").val("");
                $("#inp").attr("placeholder", keyword);
            });
        });
    </script>
</body>

</html>